import React, { useState } from 'react'
import styles from './index.module.less'
import classNames from 'classnames'
import { cloneDeep } from 'lodash'
import { Modal, Input } from 'antd'
import moment from 'moment'

const { TextArea } = Input

const EditBar = (props) => {
	const {
		curSelectNodeIdx,
		setCurSelectNode,
		dataList,
		setDataList,
		revokeList,
		setRevokeList,
		setCurSelectNodeIdx,
		setIsEditing,
	} = props

	const [recoverList, setRecoverList] = useState([])
	const [jsonModalFlag, setJsonModalFlag] = useState(false)
	const [textValue, setTextValue] = useState('')
	const [modalType, setModalType] = useState('')

	const revokeClick = () => {
		if (!revokeList.length) return
		const target = revokeList[revokeList.length - 1]
		let popTarget
		setRevokeList((l) => {
			popTarget = l.pop()
			return [...l]
		})
		setRecoverList((l) => {
			l.push(dataList)
			return [...l]
		})
		setDataList(cloneDeep(target))
		setCurSelectNode(cloneDeep(target)[curSelectNodeIdx])
	}

	const recoverClick = () => {
		if (!recoverList.length) return
		const target = recoverList[recoverList.length - 1]
		let popTarget
		setRecoverList((l) => {
			popTarget = l.pop()
			return [...l]
		})
		setRevokeList((l) => {
			l.push(dataList)
			return [...l]
		})
		setDataList(cloneDeep(target))
		setCurSelectNode(cloneDeep(target)[curSelectNodeIdx])
	}

	const refresh = () => {
		setRevokeList((l) => {
			l.push(cloneDeep(dataList))
			return [...l]
		})
		setDataList([])
	}

	const deleteNode = () => {
		if (curSelectNodeIdx === null) return
		const newDataList = cloneDeep(dataList)
		setRevokeList((l) => {
			l.push(cloneDeep(dataList))
			return [...l]
		})
		newDataList.splice(curSelectNodeIdx, 1)
		setCurSelectNodeIdx(null)
		setCurSelectNode({})
		setDataList(newDataList)
	}

	const showModal = (type) => {
		setJsonModalFlag((f) => !f)
		if (!type) return
		setModalType(type)
		if (type === 'export') {
			dataList.length > 0 && setTextValue(JSON.stringify(dataList))
		}
		if (type === 'import') {
			setTextValue('')
		}
	}

	const preview = () => {
		setIsEditing(false)
	}

	const showEdit = () => {
		setIsEditing(true)
	}

	const textValueChange = (event) => {
		setTextValue(event.target.value)
	}

	const importData = () => {
		const list = JSON.parse(textValue)
		list.forEach((item) => {
			if (item.type === 'datepicker' && item.pickerType !== 'range') {
				item.value = moment(item.value)
			}

			if (item.type === 'datepicker' && item.pickerType === 'range') {
				item[item.startField]
					? (item[item.startField] = moment(item[item.startField]))
					: (item.startTime = moment(item.startTime))

				item[item.endField]
					? (item[item.endField] = moment(item[item.endField]))
					: (item.endTime = moment(item.endTime))

				console.log(item)
			}
		})
		setDataList(list)
		showModal()
	}

	const config = [
		{ label: '撤销', icon: 'amin-chexiao', click: revokeClick },
		{ label: '重做', icon: 'amin-zhongzuo', click: recoverClick },
		{ label: '预览', icon: 'amin-yulan', click: preview },
		{ label: '导入', icon: 'amin-daoru', click: () => showModal('import') },
		{ label: '导出', icon: 'amin-daochu', click: () => showModal('export') },
		{ label: '置顶', icon: 'amin-zhiding' },
		{ label: '置底', icon: 'amin-zhidi' },
		{ label: '删除', icon: 'amin-shanchu-copy-copy', click: deleteNode },
		{ label: '清空', icon: 'amin-qingkong', click: refresh },
		{ label: '关闭', icon: 'amin-guanbi', click: showEdit },
	]

	const footerConfig = {}
	if (modalType === 'export') {
		footerConfig.footer = null
	}
	return (
		<div className={styles.editBar}>
			<Modal
				key={modalType}
				title={modalType === 'export' ? '导出的JSON数据' : '导入的JSON数据'}
				onCancel={showModal}
				onOk={importData}
				visible={jsonModalFlag}
				bodyStyle={{ minHeight: '448px' }}
				{...footerConfig}
			>
				<TextArea value={textValue} onChange={textValueChange} style={{ minHeight: '400px' }} />
			</Modal>
			{config.map((item, idx) => {
				return (
					<div className={styles.editBarItem} onClick={item.click} key={idx}>
						<i className={classNames(`iconfont ${item.icon}`, styles.editIcon)} />
						<span className={styles.editText}>{item.label}</span>
					</div>
				)
			})}
		</div>
	)
}

export default EditBar
